<template>
	<el-container>
		<el-main class='x-main-edit'>
			<el-form ref="form" :rules="form_rules" :model="form" size="mini" label-width="15%">
				<el-tabs type="border-card" v-model="page_tag">
					<!---->
					<!---->
					<el-tab-pane :label="page_info.title" name="1">
						<el-form-item label="订单号">
							{{ form.corder_id }}
						</el-form-item>
						<el-form-item label="支付订单号">
							{{ form.corder_pay_order_id }}
						</el-form-item>
						<el-form-item label="客户">
							<div>姓名：{{ form.cuser_name }}</div>
							<div>手机：{{ form.cuser_phone }}</div>
							<div>openid：{{ form.corder_openid }}</div>
						</el-form-item>
						<el-form-item label="车">
							<div>车型：{{ form.cspu_name }}</div>
							<div>车牌号：{{ form.csku_car_no }}</div>
						</el-form-item>
						<el-form-item label="套餐">
							<div v-if="form.corder_pay_plan_h<=0">没购买套餐</div>
							<div v-else>
								<div>名称：{{form.csplan_name}}</div>
								<div>金额：{{form.corder_pay_plan_price}}</div>
								<div>时长：{{form.corder_pay_plan_h}}小时</div>
							</div>
						</el-form-item>
						<el-form-item label="行驶公里">
							<div>{{ form.corder_km }}公里</div>
						</el-form-item>
						<el-form-item label="用车时长">
							<div>{{ form.corder_minute }}分钟</div>
						</el-form-item>
						<el-form-item label="无忧保障金额">
							<div>{{ form.corder_price_safe }}</div>
						</el-form-item>
						<el-form-item label="订单总金额">
							<div>{{ form.corder_price_total }}</div>
						</el-form-item>
						<el-form-item label="优惠券抵扣金额">
							<div>{{ form.corder_price_down }}</div>
						</el-form-item>
						<el-form-item label="订单支付金额">
							<div v-if="form.corder_back==1" style="color: blue;">{{ form.original_price }}</div>
							<div class="x-alert">
								<span>套餐支付金额+还车支付金额</span>
							</div>
						</el-form-item>
						<el-form-item label="违章">
							<div v-if="form.corder_ensure==1" style="color: red;">
								存在违章
								<el-button type="text" size="mini" @click="g_page.funcRedirectEdit(`app_car__ensure__list?compOrderID=${form.corder_id}`)">
									查看
								</el-button>
							</div>
						</el-form-item>
						<el-form-item label="状态">
							<div>{{ form.state }}</div>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
					<el-tab-pane v-if="form.corder_use==1" label="用车报备" name="2">
						<el-form-item label="用车时间">
							<div>{{ form.corder_use_date }}</div>
						</el-form-item>
						<el-form-item label="用车网点">
							<div>{{ form.use_cnetwork_name }}</div>
							<div>{{ form.use_cnetwork_lng }},{{ form.use_cnetwork_lat }}</div>
						</el-form-item>
						<el-form-item label="标签">
							<div>{{ form.corder_use_tag }}</div>
						</el-form-item>
						<el-form-item label="图片">
							<CompImg :img_root="page_info.static_file_root" :img_val="form.corder_use_pic"></CompImg>
						</el-form-item>
						<el-form-item label="说明">
							<div>{{ form.corder_use_desc }}</div>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
					<el-tab-pane v-if="form.corder_back==1" label="还车报备" name="3">
						<el-form-item label="还车时间">
							<div>{{ form.corder_back_date }}</div>
						</el-form-item>
						<el-form-item label="还车网点">
							<div>{{ form.back_cnetwork_name }}</div>
							<div>{{ form.back_cnetwork_lng }},{{ form.back_cnetwork_lat }}</div>
							<div>
								<!--								<Location :lng="form.use_cnetwork_lng"-->
								<!--										  :lat="form.use_cnetwork_lat"-->
								<!--										  :lng_b="form.back_cnetwork_lng"-->
								<!--										  :lat_b="form.back_cnetwork_lat"-->
								<!--										  :x="form.corder_x_id"></Location>-->
								<el-button type="text" @click="funcGetQr" size="mini">查看轨迹</el-button>
							</div>
						</el-form-item>
						<el-form-item label="停车位置图片">
							<CompImg :img_root="page_info.static_file_root" :img_val="form.corder_stop_pic"></CompImg>
						</el-form-item>
						<el-form-item label="停车描述">
							<div>{{ form.corder_stop_desc }}</div>
						</el-form-item>
						<el-form-item label="标签">
							<div>{{ form.corder_back_tag }}</div>
						</el-form-item>
						<el-form-item label="图片">
							<CompImg :img_root="page_info.static_file_root" :img_val="form.corder_back_pic"></CompImg>
						</el-form-item>
						<el-form-item label="说明">
							<div>{{ form.corder_back_desc }}</div>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
					<el-tab-pane v-if="form.corder_back==1" label="价格明细" name="4">
						<el-form-item label="价格明细">
							<el-table stripe ref="multipleTable" tooltip-effect="dark"
									  :data="form.price_info">
								<el-table-column label="日期">
									<template slot-scope="data">
										<div v-html="data.row.day"></div>
									</template>
								</el-table-column>
								<el-table-column label="总时长">
									<template slot-scope="data">
										<div>{{data.row.date_begin}}</div>
										<div>{{data.row.date_end}}</div>
									</template>
								</el-table-column>
								<el-table-column label="节假日">
									<template slot-scope="data">
										<div v-if="data.row.is_holiday">是</div>
										<div style="color:red;" v-else>否</div>
									</template>
								</el-table-column>
								<el-table-column label="套餐">
									<template slot-scope="data">
										{{ data.row.down_m }}分
									</template>
								</el-table-column>
								<el-table-column label="计费时长">
									<template slot-scope="data">
										{{ data.row.total_m }}分
									</template>
								</el-table-column>
								<el-table-column label="封顶">
									<template slot-scope="data">
										<div v-if="data.row.is_max">是</div>
										<div style="color:red;" v-else>否</div>
									</template>
								</el-table-column>
								<el-table-column label="用车">
									<template slot-scope="data">
										{{data.row.total_price}}元
									</template>
								</el-table-column>
								<el-table-column label="无忧保障">
									<template slot-scope="data">
										<div v-if="!data.row.safe">未购买</div>
										<div v-else>
											<div>{{data.row.safe_total_price}}元</div>
										</div>
									</template>
								</el-table-column>
							</el-table>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
				</el-tabs>
			</el-form>
			<!---->
			<!---->
			<!-- 按钮部分 -->
			<div class="save_wrap">
				<el-button @click="g_page.funcBack" size="mini">返回</el-button>
				<el-button v-if="form.corder_state==10" type="warning" @click="funcDone" size="mini">订单完成</el-button>
				<el-button v-if="form.corder_back==0" type="danger" @click="form_dialog_vis=true" size="mini">
					强制还车
				</el-button>
				<!--				<el-checkbox v-if="page_info.is_admin_edit" style="margin-left: 10px;" label="保存后停留" v-model="checked"/>-->
			</div>
			<!---->
			<!---->
			<!---->
		</el-main>
		<!---->
		<!---->
		<!-- 弹框 -->
		<el-dialog title="强制还车选择网点" :visible.sync="form_dialog_vis" width="70%">
			<el-form ref="form_dialog" :rules="form_dialog_rules" :model="form_dialog" size="mini" label-width="15%">
				<el-form-item label="还车网点">
					<el-select filterable v-model="form_dialog.csnk_cnetwork_id" placeholder="请选择">
						<el-option v-for="item in page_info.list_network"
								   :label="item.cnetwork_name"
								   :key="item.cnetwork_id"
								   :value="item.cnetwork_id">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="form_dialog_vis=false" size="mini">取消</el-button>
				<el-button type="success" @click="funcBackCar" size="mini">确认还车</el-button>
			</div>
		</el-dialog>
		<!---->
		<!---->
		<!---->
	</el-container>
</template>

<script>
	import Location from '@/views/app_wxapp/app_car/components/Location'

	export default {
		components: {
			Location
		},
		data() {
			let page_data = {}
			//
			page_data = this.g_cc.funcGetInitData(page_data)
			page_data.reply_max = 10
			page_data.reply_index = 0
			//
			page_data.form_dialog_vis = false
			page_data.form_dialog_rules = {}
			page_data.form_dialog = {}
			//
			return page_data
		},
		mounted() {
			console.log('mounted')
			console.log(this.$route.query)

			this.g_page.funcSetVue(this)
			//
			this.g_page.funcSetApiUrlEdit('/xadmin/app_car/app_car__order__edit')
			// this.g_page.funcSetApiUrlSave('/xadmin/app_car/app_car__spu__edit/save')
			let page = this
			//验证
			this.form_rules = {
				__test: [{
					required: true,
					message: '请输入原密码',
					trigger: 'blur'
				}]
			}

			let data = this.$route.query
			this.g_page.funcEdit(data)
		},
		methods: {
			funcShowDialogAfter() {
				console.log('funcShowDialogAfter')
			},
			//保存之前
			funcSaveBefore(data) {
				console.log('funcSaveBefore', data)

				// data.abc_str_00 = this.g_page.funcImgArrToStr(data.abc_str_00_imgs)

				return data
			},
			////////////////////
			//还车操作
			funcBackCar() {
				this.g_cc.func_axios({
					url: '/xadmin/app_car/app_car__order__edit/funcBackCar',
					data: {
						order_id: this.form.id,
						back_network_id: this.form_dialog.csnk_cnetwork_id
					},
					loading: false,
					success: (res) => {
						//
						if (res.data.errcode == 0) {
							this.reply_index = 0
							this.g_cc.func_loading(false, '还车处理中')
							setTimeout(() => {
								this.funcCmdReply()
							}, 100)

						} else {
							this.g_cc.func_alert(res.data.errmsg, 'error')
						}
					}
				})
				////////////
			},
			////////////////////
			//还车命令反馈
			funcCmdReply() {
				this.reply_index++
				if (this.reply_index >= this.reply_max) {
					this.g_cc.func_loading(true)
					this.g_cc.func_alert('还车超时，请重试', 'error')
					return
				}

				this.g_cc.func_axios({
					url: '/xadmin/app_car/app_car__order__edit/funcCmdReply',
					data: {
						order_id: this.form.id
					},
					loading: false,
					success: (res) => {
						//
						if (res.data.errcode == 0) {
							this.g_cc.func_loading(true)
							//
							this.g_cc.func_alert('还车成功', 'success', () => {
								this.g_page.funcReload()
							})
						} else {
							if (res.data.errcode == 10068) {
								setTimeout(() => {
									this.funcCmdReply()
								}, 1000)
							} else {
								this.g_cc.func_loading(true)
								this.g_cc.func_alert(res.data.errmsg, 'error')
							}
						}
					}
				})
			},
			////////////////////
			//订单完成
			funcDone() {
				this.g_cc.func_confirm('确定吗？', () => {
					this.g_cc.func_axios({
						url: '/xadmin/app_car/app_car__order__edit/funcDone',
						data: {
							order_id: this.form.id
						},
						success: (res) => {
							//
							if (res.data.errcode == 0) {
								this.g_cc.func_alert('成功', 'success', () => {
									this.g_page.funcBack()
								})
							} else {
								this.g_cc.func_alert(res.data.errmsg, 'error')
							}
						}
					})
				})
				////////////
			},
			////////////////////////////////////
			//预览图片
			funcGetQr() {
				let path = `pages/app_car/order_detail/order_detail?order_id=${this.form.corder_id}`
				let url = `${BASE_API}/app/z_common/app_api/wxapp_qr_long?path=${encodeURIComponent(path)}&x=${this.form.corder_x_id}`
				let content = `<br/><a href="${url}" target="_blank"><img src="${url}" style="width: 100%;" /></a>`
				this.$confirm(content, '扫码查看轨迹', {
					dangerouslyUseHTMLString: true,
					showCancelButton: false,
					showConfirmButton: false,
					showClose: true
				}).catch(() => {

				})
			}
			////////////////////
			////////////////////
			////////////////////
		}
	}
</script>
